<template>
  <div class="q-pa-md q-gutter-sm">
    <t-avatar color="red" text-color="white" icon="directions" />

    ---------
    <t-avatar color="primary" text-color="white">J</t-avatar>
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" icon="directions" />
    <t-avatar size="24px" color="orange">J</t-avatar>
    <t-avatar>
      <img src="https://cdn.quasar.dev/img/avatar.png" />
    </t-avatar>
  </div>
  <div>
    在icon - icon
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" icon="directions" />
    在slot - icon
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white">
      <q-icon name="directions" />
    </t-avatar>

    在icon - img
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white"
      icon="img:https://cdn.quasar.dev/img/avatar.png" />
    在slot - img
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white">
      <img src="https://cdn.quasar.dev/img/avatar.png" />
    </t-avatar>


    在icon - J
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" icon="J" />
    在slot - J
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white">
      J
    </t-avatar>
    传参 - JJ
    <t-avatar size="100px" font-size="52px" color="teal" text-color="white" text="JJ">
    </t-avatar>
  </div>
</template>
